<template>
  <w-modal  ref="WModal" :title="currentModel ? '添加界面' : '修改界面'" @ok="okBtnClick">
    <a-form :form="form" :label-col="{ span: 3 }" :wrapper-col="{ span: 21 }">
      <a-form-item label="类型">
        <a-select
          :disabled="typeDisabled"
          v-decorator="['type',
            { rules: [{ required: true, message: '请选择!' }] },
          ]"
        >
          <a-select-option v-for="item in types" :key="item.value" :value="item.value">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="标题">
        <a-input
          v-decorator="['title',
            { rules: [{ required: true, message: '请输入!' }] },
          ]"
          placeholder="请填写..."
        />
      </a-form-item>
      <a-form-item label="图标">
        <a-input
          v-decorator="['icon',
            { rules: [{ required: true, message: '请输入!' }] },
          ]"
          placeholder="请填写..."
        />
      </a-form-item>
      <a-form-item label="路径">
        <a-input
          v-decorator="['path',
            { rules: [{ required: true, message: '请输入!' }] },
          ]"
          placeholder="请填写..."
        />
      </a-form-item>
      <a-form-item label="索引">
        <a-select
          v-decorator="['index',
            { rules: [{ required: true, message: '请选择!' }] },
          ]"
          placeholder="请选择..."
        >
          <a-select-option v-for="item in 10" :key="item" :value="`${item - 1}`">
            {{ item - 1 }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="描述">
        <a-input
          type="textarea"
          v-decorator="['describe']"
          placeholder="请填写..."
        />
      </a-form-item>
    </a-form>
  </w-modal>
</template>

<script>
import { Admin } from '@/config/api'
import WModal from '@/components/global/modal'
export default {
  name: 'ComAdminAuthPageAdd',
  components: {
    WModal
  },
  data () {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
      types: [],
      currentModel: null,
      superModel: null,
    }
  },
  computed: {
    typeDisabled () {
      return !!this.currentModel || this.types.length === 1
    }
  },
  methods: {
    /**
     * 显示
     */
    show (types, model, superModel) {
      this.superModel = superModel
      this.types = types
      this.currentModel = model
      this.$refs.WModal.show()
      this.$nextTick(() => {
        this.form.setFieldsValue({
          type: model ? model.type : types[0].value,
          index: model ? model.index : '0',
          title: model ? model.title : '',
          icon: model ? model.icon : '',
          path: model ? model.path : '',
          describe: model ? model.describe : '',
        })
      })
    },
    /**
     * 确定按钮点击
     */
    okBtnClick () {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.$refs.WModal.showLoading()
          const method = this.currentModel ? '$put' : '$post'
          const url = this.currentModel ? `${Admin.auth.page.update}${this.currentModel._id}` : Admin.auth.page.create
          this.$wAxios[method](url, {
            ...values,
            superId: this.superModel ? this.superModel._id : undefined
          })
          .then(() => {
            this.$refs.WModal.close()
            this.$message.success('成功')
            this.$emit('reload')
          })
          .finally(() => {
            this.$refs.WModal.hideLoading()
          })
        }
      })
    }
  }
}
</script>

<style scoped></style>
